<template>
  <div class="view-container">
    <div class="title-box animate__animated animate__fadeInDown">
      <h1 class="view-title">奖惩管理数据</h1>
    </div>
    <div class="main-container animate__animated animate__lightSpeedInLeft"style="height: 65vh;">
      <div class="data-box">
        <el-card>
          <div class="chart-box" style="width: 100%">
            <div id="demo1" style="width: 100%; height: 60vh;"></div>
            <div class="chart-description" style="height: 60vh">
              <h1 style="margin: 20px;font-weight: bold;font-size: 20px">奖惩情况</h1>
              <div style="height: 20vh;margin: 20px;display: flex;align-items: center">
                <p>在校学生奖惩情况</p>
              </div>
            </div>
          </div>
        </el-card>
      </div>

    </div>
  </div>
</template>

<script setup>
import {
  onBeforeUnmount,
  onMounted,
  reactive,
  ref
} from 'vue';
import * as echarts from "echarts";
/*----------变量定义开始---------*/
let demo1Chart
const demo1Option = reactive( {
  title: {
    text: '奖惩情况',
    left: 'left',
    top: 'bottom'
  },
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b} : {c}%'
  },
  toolbox: {
    orient: 'vertical',
    top: 'center',
    feature: {
      dataView: { readOnly: false },
      restore: {},
      saveAsImage: {}
    }
  },
  legend: {
    // orient: 'vertical',
    left: 'left',
    data: ['国家级奖', '省级奖', '市级奖', '校级奖', '院级奖','警告','严重警告','记过','留校察看','开除学籍']
  },
  series: [
    {
      name: '惩罚情况',
      type: 'funnel',
      width: '40%',
      height: '45%',
      left: '5%',
      top: '50%',
      data: [
        { value: 50, name: '警告' },
        { value: 40, name: '严重警告' },
        { value: 30, name: '记过' },
        { value: 20, name: '留校察看' },
        { value: 10, name: '开除学籍' }
      ]
    },
    {
      name: '获奖情况',
      type: 'funnel',
      width: '40%',
      height: '45%',
      left: '5%',
      top: '5%',
      sort: 'ascending',
      data: [
        { value: 100, name: '院级奖' },
        { value: 80, name: '校级奖' },
        { value: 60, name: '市级奖' },
        { value: 30, name: '省级奖' },
        { value: 10, name: '国家级奖' }
      ]
    },
    {
      name: '惩罚情况',
      type: 'funnel',
      width: '40%',
      height: '45%',
      left: '55%',
      top: '5%',
      label: {
        position: 'left'
      },
      data: [
        { value: 50, name: '警告' },
        { value: 40, name: '严重警告' },
        { value: 30, name: '记过' },
        { value: 20, name: '留校察看' },
        { value: 10, name: '开除学籍' }
      ]
    },
    {
      name: '获奖情况',
      type: 'funnel',
      width: '40%',
      height: '45%',
      left: '55%',
      top: '50%',
      sort: 'ascending',
      label: {
        position: 'left'
      },
      data: [
        { value: 100, name: '院级奖' },
        { value: 80, name: '校级奖' },
        { value: 60, name: '市级奖' },
        { value: 30, name: '省级奖' },
        { value: 10, name: '国家级奖' }
      ]
    }
  ]
})
/*----------变量定义结束---------*/

/*----------钩子开始---------*/
onMounted(() => {
  demo1Chart = echarts.init(document.getElementById("demo1"))
  demo1Chart.setOption(demo1Option)
})
onBeforeUnmount(() => {
  demo1Chart.dispose()
})
/*------钩子结束------*/

</script>

<style scoped>
.view-container{
  padding-top: 20px;
  width: 90%;
  overflow: hidden;
}
.title-box{
  animation-duration: 0.5s;
}
.view-title{
  font-size: 40px;
  font-weight: bolder;
  margin-bottom: 30px;
}
.main-container{
  width: 100%;
  height: 100vh;
  background-color: #27B3FF;
}
.data-box{
  margin-bottom: 2vh;
}
.chart-description{
  width: 100%;
  background-color: #c5e7fa;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.chart-box{
  display: grid;
  grid-template-columns: 3fr 1fr;
  column-gap: 2%;
}
</style>
